<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,shrink-to-fit=no">
  <title>专家问答系统-农业知识交流论坛</title>

  <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
  <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
  <link rel="stylesheet" th:href="@{/css/mycss.css}">
  <link rel="stylesheet" th:href="@{/zplayer/css/zplayer.min.css}">
  <script th:src="@{/zplayer/js/zplayer.min.js}"></script>
  <link rel="stylesheet" href="//at.alicdn.com/t/font_2080705_x7u3h1yrrfc.css">

  <style>
    /* 重置样式 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Noto Sans SC', sans-serif;
    }

    :root {
      --primary: #2E7D32;
      --primary-light: #4CAF50;
      --primary-dark: #1B5E20;
      --secondary: #F9A825;
      --light: #F5F7F3;
      --dark: #21261E;
      --gray: #7F8D77;
      --light-gray: #E8EDE3;
      --danger: #D32F2F;
      --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      --transition: all 0.3s ease;
    }

    body {
      background-color: var(--light);
      color: var(--dark);
      line-height: 1.6;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }

    /* 原有样式保留 */
    .hero {
      background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1464226184884-fa280b87c399?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80');
      background-size: cover;
      background-position: center;
      color: white;
      text-align: center;
      padding: 150px 20px 80px;
      margin-bottom: 40px;
    }

    .hero h1 {
      font-size: 2.8rem;
      margin-bottom: 20px;
    }

    .hero p {
      font-size: 1.2rem;
      max-width: 700px;
      margin: 0 auto 30px;
    }

    .btn {
      display: inline-block;
      padding: 12px 28px;
      background: var(--secondary);
      color: white;
      border: none;
      border-radius: 50px;
      font-weight: 600;
      font-size: 1rem;
      cursor: pointer;
      transition: var(--transition);
      text-decoration: none;
      box-shadow: var(--shadow);
    }

    .btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
    }

    .btn-primary {
      background: var(--primary);
    }

    .btn-danger {
      background: var(--danger);
    }

    .btn-outline {
      background: transparent;
      border: 2px solid white;
    }

    .btn-outline:hover {
      background: white;
      color: var(--primary);
    }

    .main-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      margin-bottom: 60px;
    }

    @media (max-width: 900px) {
      .main-content {
        grid-template-columns: 1fr;
      }
    }

    .qa-form {
      background: white;
      border-radius: 12px;
      padding: 30px;
      box-shadow: var(--shadow);
    }

    .section-title {
      font-size: 1.8rem;
      color: var(--primary);
      margin-bottom: 25px;
      padding-bottom: 15px;
      border-bottom: 2px solid var(--light-gray);
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .section-title i {
      background: var(--primary-light);
      color: white;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .form-group {
      margin-bottom: 20px;
    }

    label {
      display: block;
      margin-bottom: 8px;
      font-weight: 500;
      color: var(--dark);
    }

    input, textarea, select {
      width: 100%;
      padding: 14px;
      border: 2px solid var(--light-gray);
      border-radius: 8px;
      font-size: 1rem;
      transition: var(--transition);
    }

    input:focus, textarea:focus, select:focus {
      border-color: var(--primary);
      outline: none;
      box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.2);
    }

    textarea {
      min-height: 150px;
      resize: vertical;
    }

    .form-actions {
      display: flex;
      gap: 15px;
      margin-top: 20px;
    }

    .qa-list {
      background: white;
      border-radius: 12px;
      padding: 30px;
      box-shadow: var(--shadow);
      max-height: 800px;
      overflow-y: auto;
    }

    .qa-item {
      background: var(--light);
      border-radius: 10px;
      padding: 20px;
      margin-bottom: 20px;
      transition: var(--transition);
      border-left: 4px solid var(--primary);
    }

    .qa-item:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    }

    .qa-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
    }

    .qa-category {
      background: var(--primary-light);
      color: white;
      padding: 5px 12px;
      border-radius: 20px;
      font-size: 0.85rem;
      font-weight: 500;
    }

    .qa-actions {
      display: flex;
      gap: 10px;
    }

    .action-btn {
      padding: 4px 8px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 12px;
      transition: all 0.3s ease;
      margin-left: 8px;
    }

    .action-btn.edit {
      background-color: #1890ff;
      color: white;
    }

    .action-btn.edit:hover {
      background-color: #40a9ff;
    }

    .action-btn.delete {
      background-color: #ff4d4f;
      color: white;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .action-btn.delete:hover {
      background-color: #ff7875;
    }

    .action-btn.delete i {
      font-size: 12px;
    }

    .qa-question {
      font-size: 1.2rem;
      font-weight: 600;
      margin-bottom: 15px;
      color: var(--dark);
    }

    .qa-answer {
      background: white;
      border-radius: 8px;
      padding: 15px;
      margin-bottom: 15px;
      border-left: 3px solid var(--secondary);
    }

    .qa-footer {
      display: flex;
      justify-content: space-between;
      color: var(--gray);
      font-size: 0.9rem;
      padding-top: 15px;
      border-top: 1px solid var(--light-gray);
    }

    .expert-info {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .expert-info i {
      color: var(--primary);
    }

    .no-qa {
      text-align: center;
      padding: 40px 0;
      color: var(--gray);
    }

    .no-qa i {
      font-size: 3rem;
      margin-bottom: 20px;
      color: var(--light-gray);
    }

    footer {
      background: var(--dark);
      color: white;
      padding: 50px 0 20px;
    }

    .footer-content {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 30px;
      margin-bottom: 40px;
    }

    @media (max-width: 900px) {
      .footer-content {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 600px) {
      .footer-content {
        grid-template-columns: 1fr;
      }
    }

    .footer-column h3 {
      font-size: 1.3rem;
      margin-bottom: 20px;
      position: relative;
      padding-bottom: 10px;
    }

    .footer-column h3::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 50px;
      height: 2px;
      background: var(--primary);
    }

    .footer-column ul {
      list-style: none;
    }

    .footer-column ul li {
      margin-bottom: 12px;
    }

    .footer-column a {
      color: #AAB6A2;
      text-decoration: none;
      transition: var(--transition);
    }

    .footer-column a:hover {
      color: white;
    }

    .social-links {
      display: flex;
      gap: 15px;
      margin-top: 20px;
    }

    .social-links a {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      transition: var(--transition);
    }

    .social-links a:hover {
      background: var(--primary);
      transform: translateY(-3px);
    }

    .copyright {
      text-align: center;
      padding-top: 20px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      color: #AAB6A2;
      font-size: 0.9rem;
    }

    .notification {
      position: fixed;
      top: 20px;
      right: 20px;
      padding: 15px 25px;
      border-radius: 8px;
      background: var(--primary);
      color: white;
      box-shadow: var(--shadow);
      transform: translateX(120%);
      transition: transform 0.4s ease;
      z-index: 1000;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .notification.show {
      transform: translateX(0);
    }

    .notification.error {
      background: var(--danger);
    }

    /* 新增：页头固定时的内容间距 */
    .main-content-section {
      padding-top: 80px;
    }

    /* 添加模态框样式 */
    .modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 1000;
      justify-content: center;
      align-items: center;
    }

    .modal-content {
      background-color: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      max-width: 400px;
      width: 90%;
      text-align: center;
    }

    .modal-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 15px;
      color: #333;
    }

    .modal-message {
      margin-bottom: 20px;
      color: #666;
    }

    .modal-buttons {
      display: flex;
      justify-content: center;
      gap: 10px;
    }

    .modal-btn {
      padding: 8px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s ease;
    }

    .modal-btn.confirm {
      background-color: #ff4d4f;
      color: white;
    }

    .modal-btn.confirm:hover {
      background-color: #ff7875;
    }

    .modal-btn.cancel {
      background-color: #f0f0f0;
      color: #666;
    }

    .modal-btn.cancel:hover {
      background-color: #d9d9d9;
    }
  </style>
</head>

<body>

<!-- 使用Thymeleaf布局替换引入导航栏 --><!-- 引入顶部导航栏，activeUrl设置为'expert'以高亮"专家问答"导航项 -->
<div th:replace="~{common/header::header(activeUrl='expert')}"></div>


<!-- 顶部通知 -->
<div class="notification" id="notification">
  <i class="fas fa-check-circle"></i>
  <span id="notification-text">操作成功！</span>
</div>

<!-- 主内容区 -->
<main>
  <!-- 顶部横幅 -->
  <section class="hero">
    <div class="container">
      <h1>农业专家在线问答</h1>
      <p>专业解答您在种植、养殖、农产品加工等农业领域的问题，助力农业生产</p>
      <a href="#qa-section" class="btn btn-outline"><i class="fas fa-arrow-down"></i> 开始提问</a>
    </div>
  </section>

  <!-- 问答区域 -->
  <section id="qa-section" class="main-content-section">
    <div class="container">
      <div class="main-content">
        <!-- 问题输入表单 -->
        <div class="qa-form">
          <h2 class="section-title">
            <i class="fas fa-question-circle"></i>
            提交您的问题
          </h2>
          <div class="form-group">
            <label for="category">问题分类</label>
            <select id="category">
              <option value="">-- 请选择问题分类 --</option>
              <option value="种植技术">种植技术</option>
              <option value="养殖技术">养殖技术</option>
              <option value="农产品加工">农产品加工</option>
              <option value="农业政策">农业政策</option>
              <option value="病虫害防治">病虫害防治</option>
            </select>
          </div>

          <div class="form-group">
            <label for="question">您的问题</label>
            <textarea id="question" placeholder="请详细描述您的问题..."></textarea>
          </div>

          <div class="form-group">
            <label for="answer">专家回答</label>
            <textarea id="answer" placeholder="请在此输入专家回答..."></textarea>
          </div>

          <div class="form-group">
            <label for="expert">专家姓名</label>
            <input type="text" id="expert" placeholder="输入专家姓名">
          </div>

          <div class="form-actions">
            <button class="btn btn-primary" id="add-btn">
              <i class="fas fa-plus"></i> 添加问答
            </button>
            <button class="btn" id="reset-btn">
              <i class="fas fa-redo"></i> 重置表单
            </button>
          </div>
        </div>

        <!-- 问答列表 -->
        <div class="qa-list">
          <h2 class="section-title">
            <i class="fas fa-comments"></i>
            问答列表
          </h2>

          <div id="qa-container">
            <!-- 问答项会动态添加到这里 -->
          </div>
        </div>
      </div>
    </div>
  </section>
</main>

<!-- 页脚 -->
<footer>
  <div class="container">
    <div class="footer-content">
      <div class="footer-column">
        <h3>关于农知汇</h3>
        <p>农知汇是一个专注于农业知识分享的平台，致力于为农业从业者提供专业、实用的农业技术和资讯。</p>
        <div class="social-links">
          <a href="#"><i class="fab fa-weixin"></i></a>
          <a href="#"><i class="fab fa-weibo"></i></a>
          <a href="#"><i class="fab fa-qq"></i></a>
          <a href="#"><i class="fab fa-github"></i></a>
        </div>
      </div>

      <div class="footer-column">
        <h3>快速链接</h3>
        <ul>
          <li><a href="#">首页</a></li>
          <li><a href="#">农业知识库</a></li>
          <li><a href="#">专家问答</a></li>
          <li><a href="#">农业政策</a></li>
          <li><a href="#">农业技术</a></li>
        </ul>
      </div>

      <div class="footer-column">
        <h3>热门分类</h3>
        <ul>
          <li><a href="#">水稻种植</a></li>
          <li><a href="#">蔬菜栽培</a></li>
          <li><a href="#">果树管理</a></li>
          <li><a href="#">畜牧养殖</a></li>
          <li><a href="#">水产养殖</a></li>
        </ul>
      </div>

      <div class="footer-column">
        <h3>联系我们</h3>
        <ul>
          <li><i class="fas fa-envelope"></i> contact@nongzhihui.com</li>
          <li><i class="fas fa-phone"></i> 400-123-4567</li>
          <li><i class="fas fa-map-marker-alt"></i> 北京市海淀区中关村南大街5号</li>
        </ul>
      </div>
    </div>

    <div class="copyright">
      <p>&copy; 2023 农知汇农业知识平台. 保留所有权利 | 京ICP备12345678号</p>
    </div>
  </div>
</footer>

<!-- 添加模态框HTML -->
<div id="deleteModal" class="modal">
  <div class="modal-content">
    <div class="modal-title">删除确认</div>
    <div class="modal-message" id="modalMessage"></div>
    <div class="modal-buttons">
      <button class="modal-btn confirm" id="modalConfirm">确定</button>
      <button class="modal-btn cancel" id="modalCancel">取消</button>
    </div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const qaContainer = document.getElementById('qa-container');
    const addBtn = document.getElementById('add-btn');
    const resetBtn = document.getElementById('reset-btn');
    const notification = document.getElementById('notification');
    const notificationText = document.getElementById('notification-text');

    // 初始示例数据
    const initialQAs = [
      {
        id: 1,
        category: '种植技术',
        question: '水稻在生长过程中出现黄叶是什么原因？',
        answer: '水稻黄叶可能是由多种原因造成的，包括：1. 缺氮肥，需要补充氮肥；2. 水分管理不当，过多或过少；3. 病虫害影响，如稻瘟病或螟虫；4. 土壤酸碱度失衡。建议进行土壤检测，并根据具体情况采取相应措施。',
        expert: '张教授',
        date: '2023-06-15'
      },
      {
        id: 2,
        category: '养殖技术',
        question: '如何预防猪的常见传染病？',
        answer: '预防猪传染病的关键措施包括：1. 加强饲养管理，保持圈舍清洁干燥；2. 定期消毒，使用有效消毒剂；3. 实施科学的免疫程序，如猪瘟、口蹄疫等疫苗的接种；4. 严格控制外来人员和车辆进入养殖场；5. 新引进猪只需隔离观察至少2周。',
        expert: '李兽医',
        date: '2023-06-12'
      }
    ];

    // 加载初始数据
    initialQAs.forEach(qa => {
      addQAItem(qa);
    });

    // 显示模态框
    function showModal(message, onConfirm) {
      const modal = document.getElementById('deleteModal');
      const modalMessage = document.getElementById('modalMessage');
      const confirmBtn = document.getElementById('modalConfirm');
      const cancelBtn = document.getElementById('modalCancel');

      modalMessage.textContent = message;
      modal.style.display = 'flex';

      // 移除之前的事件监听器
      const newConfirmBtn = confirmBtn.cloneNode(true);
      const newCancelBtn = cancelBtn.cloneNode(true);
      confirmBtn.parentNode.replaceChild(newConfirmBtn, confirmBtn);
      cancelBtn.parentNode.replaceChild(newCancelBtn, cancelBtn);

      // 添加新的事件监听器
      newConfirmBtn.addEventListener('click', () => {
        modal.style.display = 'none';
        if (onConfirm) onConfirm();
      });

      newCancelBtn.addEventListener('click', () => {
        modal.style.display = 'none';
      });
    }

    // 检查删除权限
    window.checkDeletePermission = function(id) {
      const roleId = [[${session.loginUser != null ? session.loginUser.roleId : null}]];
      console.log('当前用户角色ID:', roleId);
      
      if (roleId === 1) {
        showModal('确定要删除这个问答吗？', () => {
          const qaItems = document.querySelectorAll('.qa-item');
          for (let item of qaItems) {
            const deleteBtn = item.querySelector('.action-btn.delete');
            if (deleteBtn && deleteBtn.getAttribute('onclick').includes(id)) {
              item.remove();
              const index = initialQAs.findIndex(qa => qa.id === id);
              if (index !== -1) {
                initialQAs.splice(index, 1);
              }
              showNotification('问答已删除');
              break;
            }
          }
        });
      } else {
        showModal('您没有删除权限');
      }
    };

    // 删除问答
    window.deleteQA = function(id) {
      // 此函数保留但不再直接使用，改为通过checkDeletePermission调用
      checkDeletePermission(id);
    };

    // 添加问答按钮事件
    addBtn.addEventListener('click', function() {
      const category = document.getElementById('category').value;
      const question = document.getElementById('question').value;
      const answer = document.getElementById('answer').value;
      const expert = document.getElementById('expert').value;

      if (!category || !question || !answer || !expert) {
        showNotification('请填写所有必填字段', 'error');
        return;
      }

      const newQA = {
        id: Date.now(),
        category,
        question,
        answer,
        expert,
        date: new Date().toLocaleDateString('zh-CN')
      };

      // 添加到初始数据数组
      initialQAs.unshift(newQA);
      // 添加到页面
      addQAItem(newQA);
      showNotification('问答已成功添加');
      resetForm();
    });

    // 重置表单按钮
    resetBtn.addEventListener('click', resetForm);

    // 添加问答项到列表
    function addQAItem(qa) {
      const qaItem = document.createElement('div');
      qaItem.className = 'qa-item';
      qaItem.innerHTML = `
        <div class="qa-header">
          <span class="category">${qa.category}</span>
          <span class="date">${qa.date}</span>
        </div>
        <div class="qa-content">
          <div class="question">
            <strong>问：</strong>${qa.question}
          </div>
          <div class="answer">
            <strong>答：</strong>${qa.answer}
          </div>
          <div class="expert">
            <strong>专家：</strong>${qa.expert}
          </div>
        </div>
        <div class="qa-actions">
          <button class="action-btn delete" onclick="deleteQA(${qa.id})">
            <i class="fas fa-trash-alt"></i> 删除
          </button>
        </div>
      `;
      qaContainer.prepend(qaItem);
    }

    // 编辑问答
    window.editQA = function(id) {
      const items = document.querySelectorAll('.qa-item');
      for (let item of items) {
        if (item.querySelector('.action-btn.edit').getAttribute('onclick').includes(id)) {
          const category = item.querySelector('.qa-category').textContent;
          const question = item.querySelector('.qa-question').textContent;
          const answer = item.querySelector('.qa-answer').textContent;
          const expert = item.querySelector('.expert-info span').textContent.replace('专家：', '');

          document.getElementById('category').value = category;
          document.getElementById('question').value = question;
          document.getElementById('answer').value = answer;
          document.getElementById('expert').value = expert;

          showNotification('问答已加载到表单，请修改后重新提交');
          window.scrollTo({top: 0, behavior: 'smooth'});
          break;
        }
      }
    };

    // 重置表单
    function resetForm() {
      document.getElementById('category').value = '';
      document.getElementById('question').value = '';
      document.getElementById('answer').value = '';
      document.getElementById('expert').value = '';
    }

    // 显示通知
    function showNotification(message, type = 'success') {
      notificationText.textContent = message;
      notification.className = 'notification';

      if (type === 'error') {
        notification.classList.add('error');
        notification.querySelector('i').className = 'fas fa-exclamation-triangle';
      } else {
        notification.querySelector('i').className = 'fas fa-check-circle';
      }

      notification.classList.add('show');

      setTimeout(() => {
        notification.classList.remove('show');
      }, 3000);
    }

    // 移动端菜单功能（从导航栏模板中提取的JavaScript）
    const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
    const mobileMenu = document.querySelector('.mobile-menu');
    const mobileCategoryToggle = document.querySelector('.mobile-category-toggle');
    const mobileDropdownMenu = document.querySelector('.mobile-dropdown-menu');

    if (mobileMenuBtn) {
      mobileMenuBtn.addEventListener('click', function() {
        mobileMenu.classList.toggle('active');
      });
    }

    if (mobileCategoryToggle) {
      mobileCategoryToggle.addEventListener('click', function(e) {
        e.preventDefault();
        mobileDropdownMenu.classList.toggle('active');
      });
    }
  });
</script>
</body>
</html>